<template>
    <div>
        <el-row :gutter="30">
            <el-col :span="8">
                <el-card class="box-card">
                    <div class="user">
                        <img class="user-images" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                        <div class="user-info">
                            <p class="name">{{ userBaseList.nickName }}</p>
                            <p class="roleName">{{ roleName }}</p>
                        </div>
                    </div>
                    <div class="login-info">
                        <p>当前登录IP地址：<span>{{ clientIp }}</span></p>
                        <p>当前登录具体地址：<span>{{ clientAddress }}</span></p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <div class="info">
                    <div class="info-health" :style="{
                        height: '330px',
                        overflowX: 'hidden',
                        overflowY: 'auto',
                    }">
                        <el-card class="info-health-card" v-for="item in clockList" :key="item.title"
                            :body-style="{ display: 'flex', padding: '0px' }" style="width: 30%;">
                            <i class='icon' :class="item.clockStatus == 1 ? 'el-icon-success' : 'el-icon-error'"
                                :style="{ background: item.clockStatus == 1 ? '#67C23A' : '#F56C6C' }"></i>
                            <div class="detail" @click="getClockInformation(item)" style="width: 400px;">
                                <p
                                    style="font-size: 18px; margin-top: 20%; width: 100%; word-wrap: break-word; height: 10px;">
                                    {{ item.title }}</p>
                                <p style="color:darkgrey; margin-bottom: 20%;">健康状态：
                                    <span v-if="item.clockStatus == 1" style="color:#67C23A;font-weight: bold;">正常</span>
                                    <span v-else style="color:#F56C6C;font-weight: bold;">异常</span>
                                </p>
                            </div>
                        </el-card>

                        <el-dialog title="详细信息" :visible.sync="dialogVisible" width="20%" v-model="clockSon">
                            <p style="display: flex;flex-direction: column;justify-content: center;">
                                <span>标题：{{ clockSon.title }}</span>
                                <span>打卡时间：{{ clockSon.clockTime }}</span>
                                <span>打卡地点：{{ clockSon.clockLocation }}</span>
                                <span style="color: darkgrey;"> 健康状态：
                                    <span v-if="clockSon.clockStatus == 1"
                                        style="color:#67C23A;font-weight: bold;">正常</span>
                                    <span v-else style="color:#F56C6C;font-weight: bold;">异常</span></span>
                            </p>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">关 闭</el-button>
                            </span>
                        </el-dialog>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="30" style="margin-top: 20px;">
            <el-col :span="8">
                <el-card style="height: 460px;">
                    <div style="display:flex;">
                        <h3>个人信息</h3>
                        <div style="margin-left: 50%;"> <el-button type="primary"
                                @click="changeVisible = true">点击修改</el-button>
                        </div>
                    </div>
                    <div v-model="userBaseList">
                        <p>用户名：<span>{{ userBaseList.username }}</span></p>
                        <p>用户昵称：<span>{{ userBaseList.nickName }}</span></p>
                        <p>年龄：<span>{{ userBaseList.age }}</span></p>
                        <p>性别：<span>{{ userBaseList.sex }}</span></p>
                        <p>家庭住址：<span>{{ userBaseList.address }}</span></p>
                        <p>所在单位：<span>{{ userBaseList.unitName }}</span></p>
                        <p>出生日期：<span>{{ userBaseList.birthday }}</span></p>
                        <p>电话号码：<span>{{ userBaseList.phone }}</span></p>
                        <p>教育程度：<span>{{ userBaseList.education }}</span></p>
                        <p>政治面貌：<span>{{ userBaseList.identity }}</span></p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card :style="{
                    height: '460px',
                    overflowX: 'hidden',
                    overflowY: 'auto',
                }">
                    <el-table :data="clockList">
                        <el-table-column prop="title" label="标题" width="180">
                        </el-table-column>
                        <el-table-column prop="clockTime" label="打卡时间" width="180">
                        </el-table-column>
                        <el-table-column prop="clockLocation" label="打卡定位" width="180">
                        </el-table-column>
                        <el-table-column prop="clockPerson" label="打卡人" width="180">
                        </el-table-column>
                        <el-table-column prop="clockContent" label="体温" width="180">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog title="修改个人信息" :visible.sync="changeVisible" width="50%" @close="changeClosed()">
            <!--修改用户权限对话框的主体-->
            <el-form :model="informationForm" :rules="informationFormRules" ref="informationFormRef" label-width="90px">
                <el-form-item label="用户名：" prop="username">
                    <el-input v-model="informationForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户昵称：" prop="nickName">
                    <el-input v-model="informationForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="年龄：" prop="age">
                    <el-input v-model="informationForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                    <el-select v-model="informationForm.sex" placeholder="请选择">
                        <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家庭住址：" prop="address">
                    <el-input v-model="informationForm.address"></el-input>
                </el-form-item>
                <el-form-item label="所在单位：" prop="unitName">
                    <el-input v-model="informationForm.unitName"></el-input>
                </el-form-item>
                <el-form-item label="出生日期：" prop="birthday">
                    <el-date-picker v-model="informationForm.birthday" value-format="yyyy-MM-dd" type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="电话号码：" prop="phone">
                    <el-input v-model="informationForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="教育程度：" prop="education">
                    <el-select v-model="informationForm.education" placeholder="请选择">
                        <el-option v-for="item in educationList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="政治面貌：" prop="identity">
                    <el-select v-model="informationForm.identity" placeholder="请选择">
                        <el-option v-for="item in identityList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeVisible = false">取 消</el-button>
                <el-button type="primary" @click.native.prevent="submit">提 交</el-button>
            </span>
        </el-dialog>



    </div>
</template>
<script>
import { GetUserBaseInformationAPI, UpdateUserInfoAPI, GetLocationByUserIpAPI } from '@/components/utils/api/user_api.js'
import { GetClockAPI, GetClientIpAddressAPI } from '@/components/utils/api/clock_api.js'
export default {
    data() {
        let checkAge = (rule, value, callback) => {
            let reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/; //年龄是1-120之间有效
            if (value == undefined) {
                callback([new Error("帐号输入不合法")]);
            } else {
                if (value && value.length > 0) {
                    if (!reg.test(value)) {
                        callback([new Error("年龄输入不合法")]);
                    } else {
                        callback();
                    }
                } else if (value.length == 0) {
                    callback();
                } else {
                    callback(new Error("年龄输入不合法"));
                }
            }
        }
        return {
            clockList: [],
            clockSon: [],
            roleName: '',
            userBaseList: [],
            dialogVisible: false,
            changeVisible: false,
            informationForm: [],
            clientIp: '',
            clientAddress: '',
            location: '',
            address: '',
            informationFormRules: {
                phone: [
                    { required: true, message: "请输入手机号码", trigger: "blur" },
                    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: "请输入正确的手机号码"
                    }
                ], age: [
                    {
                        required: true,
                        message: "请输入合法的年龄",
                        validator: checkAge,//从这里调用上面的方法即可
                        trigger: "blur",
                    },
                ], nickName: [
                    { required: true, message: '请输入用户昵称', trigger: 'blur' },
                ], address: [
                    { required: true, message: '请输入用户地址', trigger: 'blur' },
                ]
            },
            sexList: [
                {
                    value: 0,
                    label: "女"
                },
                {
                    value: 1,
                    label: "男"
                },
            ],
            identityList: [
                {
                    value: "群众",
                    label: "群众"
                }, {
                    value: "共青团员",
                    label: "共青团员"
                }, {
                    value: "预备党员",
                    label: "预备党员"
                }, {
                    value: "正式党员",
                    label: "正式党员"
                }
            ], educationList: [
                {
                    value: "无",
                    label: "无"
                }, {
                    value: "专科",
                    label: "专科"
                }, {
                    value: "全日制本科",
                    label: "全日制本科"
                }, {
                    value: "非全日制本科",
                    label: "非全日制本科"
                }, {
                    value: "硕士",
                    label: "硕士"
                }, {
                    value: "博士",
                    label: "博士"
                }, {
                    value: "博士后",
                    label: "博士后"
                }
            ],
        }
    },
    methods: {
        //提交修改请求
        submit() {
            var params = {
                "id": this.informationForm.userId,
                "username": this.informationForm.username,
                "nickName": this.informationForm.nickName,
                "sex": this.informationForm.sex,
                "age": this.informationForm.age,
                "birthday": this.informationForm.birthday,
                "phone": this.informationForm.phone,
                "address": this.informationForm.address,
                "identity": this.informationForm.identity,
                "unitName": this.informationForm.unitName,
                "education": this.informationForm.education,
                "type": this.informationForm.type
            }
            if (params.sex == "男") {
                params.sex = 1
            }
            else if (params.sex == "女") {
                params.sex = 0
            }
            UpdateUserInfoAPI(params).then(res => {
                if (res.data.code == 200) {
                    this.$message.success("修改成功")
                    this.changeVisible = false
                    this.getUserInformation()
                }
                else {
                    this.$message.error(res.data.message)
                }
                // console.log(res)
            })
        },


        //修改对话框重置主体
        changeClosed() {
            this.$refs.informationFormRef.resetFields()
        },

        //  获取详细信息
        getClockInformation(information) {
            this.dialogVisible = true
            this.clockSon = information;
        },

        // 初始化用户数据
        getUserInformation() {
            var params = {
                token: sessionStorage.getItem('token').substring(9, sessionStorage.getItem('token').length),
                systemModelCode: -1
            }
            GetUserBaseInformationAPI(params).then(res => {
                this.userBaseList = res.data
                if (this.userBaseList.sex == 1) {
                    this.userBaseList.sex = "男"
                }
                else {
                    this.userBaseList.sex = "女"
                }
                this.$nextTick(() => {
                    if (this.userBaseList.roleName == "管理员用户") {
                        this.roleName = "超级管理员"
                    }
                    if (this.userBaseList.roleName == "普通用户") {
                        this.roleName = "普通用户"
                    }
                    if (this.userBaseList.roleName == "教师用户") {
                        this.roleName = "教师用户"
                    }
                })
                this.informationForm = JSON.parse(JSON.stringify(this.userBaseList))
            })
        },

        // 初始化打卡数据
        getClockList() {
            var params = {
                clockPersonId: sessionStorage.getItem("userId")
            }
            GetClockAPI(params).then(res => {
                this.clockList = res.data.data
                console.log(res.data)
            }
            )
        },

        // 获取客户端ip地址
        getClientIpAddress() {
            var params = {}
            GetClientIpAddressAPI(params).then(res => {
                this.clientIp = res.data.data
            })
        },

        //获取用户位置信息
        getLocation() {
            this.$jsonp(
                'https://apis.map.qq.com/ws/location/v1/ip?',
                {
                    key: 'XXUBZ-7ZHL4-Q3BU6-X63FP-DWA36-DHBQ5',
                    output: 'jsonp'
                }
            ).then(res => {
                this.location = res.result.ad_info
                this.address = this.location.province + this.location.city
                if (this.location != null) {
                    this.address = this.address + this.location.district
                }
            })
        },

        getLocationByUserIp() {
            GetLocationByUserIpAPI(this.clientIp).then(res => {
                var result = res.data.data.position.ad_info
                console.log("🚀 ~ file: PersonalInformation.vue:258 ~ GetLocationByUserIpAPI ~ result:", result)
                var nation = result.nation
                var province = result.province
                var city = result.city
                var district = result.district
                this.clientAddress = nation + province + city + district
            })
        }
    },
    created() {
        this.getUserInformation()
        this.getClockList()
        this.getClientIpAddress()
        this.getLocationByUserIp()
        this.getLocation()
    }
}
</script>
<style lang="less" scoped>
.user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;

    .user-images {
        margin-right: 40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    .user-info {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: darkgrey;
        }
    }
}

.login-info {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999;

        span {
            color: #666;
            margin-left: 60px;
        }
    }
}

.box-card {
    margin-bottom: 20px;
}

.info {
    .info-health {
        display: flex;
        flex-wrap: wrap;

        .info-health-card {
            margin: 0px 10px 20px 10px;
            width: 250px;
            height: 80px;
            display: flex;

            .icon {
                width: 70px;
                height: 80px;
                font-size: 30px;
                text-align: center;
                line-height: 80px;
                color: #fff;
                padding: 0px;
            }

            .detail {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
    }
}
</style>